<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertx-web-client</title>
    <script src="https://unpkg.io/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
    <script src='https://unpkg.io/@vertx/eventbus-bridge-client.js@1.0.0-1/vertx-eventbus.js'></script>
</head>
<body>
<div>
    <label for="textarea">ChatRoom</label>
    <textarea id="textarea" rows="10" cols="50"></textarea>
</div>

<div>
    <label for="nameInput">你的名字</label>
    <input type="text" id="nameInput" value="Anonymous"/>
    <label for="contentInput">你要说的</label>
    <input type="text" id="contentInput" value=""/>
</div>
<h1>
    你好！Vert.x
</h1>
</body>

<script>

    var eb = new EventBus('http://localhost:8080/eventbus');

    eb.onopen = () => {

        // set a handler to receive a message
        eb.registerHandler('chatroom', (error, message) => {
            let body = message.body
            let tt = document.getElementById("textarea")
            tt.textContent = tt.textContent + `${body.name}:${body.content}\n`

            console.log('received a message: ' + JSON.stringify(message));
        });

        let contentInput = document.getElementById("contentInput");

        // 按下键盘后发送消息
        contentInput.addEventListener("keydown",(event)=>{
            let name = document.getElementById("nameInput").value;
            if (event.key === "Enter"){
                eb.publish('chatroom', {name: name, content: contentInput.value});
                // 输入框置为空
                contentInput.value = "";
            }
        })
    }

</script>
</html>